<!--
 * @Author: zf
 * @Date: 2022-09-25 13:40:52
 * @LastEditTime: 2022-09-25 22:28:04
 * @Description: 
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Bootstrap 实例 - 边框表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        th,
        tr {
            text-align: center;
        }

        ;

        #username,
        #usercity,
        #dataName,
        #dataAdress {
            height: 30px;
            width: 270px;
            outline: none;
            border-style: none;
        }
    </style>
</head>

<body>
    <button type="button" class="btn btn-default" id="add">增加</button>
    <button type="button" class="btn btn-default" id="search">搜索</button>
    <input id="search-name" placeholder="请输入姓名">
    <input id="search-city" placeholder="请输入城市">

    <!-- 新增模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        新增
                    </h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>城市</th>

                            </tr>
                            <tr>
                                <td><input placeholder="请输入姓名" id="username"></td>
                                <td><input placeholder="请输入城市" id="usercity"></td>
                            </tr>
                        </thead>


                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="add-btn">
                        新增
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 修改模态框（Modal） -->
    <div class="modal fade" id="reModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改
                    </h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>城市</th>

                            </tr>
                            <tr>
                                <td><input type="text" id="dataName"></td>
                                <td><input type="text" id="dataAdress"></td>
                            </tr>
                        </thead>

                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-close" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-re">
                        确定修改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
        $(function () { $('#reModal').modal('hide') });
    </script>

    <table class="table table-bordered">
        <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody id="main">

        </tbody>
    </table>
    <script>
        let data = [
            { id: 1, name: "李四", city: "重庆" },
            { id: 2, name: "张三", city: "成都" },

        ];
        function renderTbody(data) {
            $("tbody").empty();
            //渲染数据
            for (let i = 0; i < data.length; i++) {
                const item = data[i];
                $("tbody").append(
                    `
         <tr>
          <td>${item.name}</td>
          <td>${item.city}</td>
          <td>
            <button type="button" class="btn btn-danger" data-id=${item.id} id="del">删除</button>
            <button type="button" class="btn btn-info"  data-id=${item.id} id="re">修改</button>
          </td>
        </tr>
       
`
                )
            }
        }
        renderTbody(data);
        //增加框
        $("#add").on("click", () => {
            $(function () { $('#myModal').modal('show') });
            //确定新增按钮
            $(".btn-primary").on("click", () => {
                const id = parseInt(data.length + 1)
                const username = $("#username").val();
                const usercity = $("#usercity").val();
                console.log(username);
                console.log(usercity);
                const newdata = {
                    id: id,
                    name: username,
                    city: usercity,
                }
                data.push(newdata);
                console.log(data)
                renderTbody(data);
                $(function () { $('#myModal').modal('hide') });
            });
            console.log(data)
        })

        //删除
        $("tbody").on("click", "#del", (event) => {
            if (window.confirm("你确定要删除吗？")) {
                //点击确定执行以下：（窗口返回一个true）
                $(event.target).parent().parent().remove()
            } else {
                // (取消时退出)
                return;
            }
            console.log(data)
        });
        //修改
        $("tbody").on("click", "#re", (event) => {
            const dataId = parseInt($(event.target).attr("data-id"))
            $(function () { $('#reModal').modal('show') });
            // 数组提供了一个 查找的方法  filter map
            const currentData = data.find((item) => {
                console.log(item);
                return item.id === dataId;
            });
            //获取当前信息
            $("#dataName").val(currentData.name);
            $("#dataAdress").val(currentData.city);
            //确认修改
            $(".btn-re").on("click", function (event) {
                //获取input的值

                const name = $("#dataName").val();
                const city = $("#dataAdress").val();
                //修改data
                for (let i = 0; i < data.length; i++) {
                    const item = data[i];
                    if (item.id === dataId) {
                        item.name = name;
                        item.city = city
                    };
                }
                console.log(data)
                //重新渲染
                renderTbody(data);
                $(function () { $('#reModal').modal('hide') });
            });
        })
        //查找
        let searchData=[]
        let copyData=$.extend(true,[],data)
        $("#search").on("click", () => {
            //获取输入框的内容
            const name = $("#search-name").val()
            const city = $("#search-city").val()
            console.log(name)
            console.log(city);
            const text=city+name 
            
            for(let i=0;i<copyData.length;i++){
                const item=copyData[i]
                if(item.name.includes(text)|| item.city.includes(text)){
                     searchData.push(copyData[i])
                    // data=searchData
                    renderTbody(searchData);
                }

            }


        })





    </script>
</body>

</html>